<template>
  <div class="car-table">
    <h2>车辆信息管理</h2>
    <div class="controls">
      <button class="add-car-btn" data-bs-toggle="modal" data-bs-target="#addCarModal">增加车辆</button>
      <div class="search-container">
        <button class="search-btn" @click="search">查询</button>
        <input type="text" class="search-input" v-model="searchValue" placeholder="查询车辆" />
        <button class="refresh-btn" @click="fetchCars">返回</button>
      </div>
    </div>
    <table>
      <thead>
      <tr>
        <th>ID</th>
        <th>图片</th>
        <th>车名</th>
        <th>类型</th>
        <th>品牌</th>
        <th>车辆全新程度</th>
        <th>挡位</th>
        <th>操作</th>
        <th>上传图片</th>
        <th>分配教练</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(car, index) in carInfo" :key="index">
        <td>{{car.id}}</td>
        <td>
          <img :src="car.image" class="car-image" />
        </td>
        <td>
          <template v-if="!car.editing">{{ car.name }}</template>
          <input v-else type="text" class="form-control" v-model="car.name" />
        </td>
        <td>
          <template v-if="!car.editing">{{ car.type }}</template>
          <select v-else class="form-control" v-model="car.type">
            <option>大型轿车</option>
            <option>中型轿车</option>
            <option>小型轿车</option>
          </select>
        </td>
        <td>
          <template v-if="!car.editing">{{ car.brand }}</template>
          <input v-else type="text" class="form-control" v-model="car.brand" />
        </td>
        <td>
          <template v-if="!car.editing">{{ car.newlevel }}</template>
          <input v-else type="number" class="form-control" v-model="car.newlevel" />
        </td>
        <td>
          <template v-if="!car.editing">{{ car.optype === '0' ? '手动挡' : '自动档' }}</template>
          <select v-else class="form-control" v-model="car.optype">
            <option value="1">自动档</option>
            <option value="0">手动挡</option>
          </select>
        </td>
        <td class="actions">
          <template v-if="!car.editing">
            <button class="edit-btn" @click="car.editing = !car.editing">编辑</button>
            <button class="delete-btn" @click="deleteCar(car)">删除</button>
          </template>
          <template v-else>
            <button class="save-btn" @click="saveEditedCar(car)">保存</button>
            <button class="cancel-btn" @click="car.editing = !car.editing">取消</button>
          </template>
        </td>
        <td>
          <input
              type="file"
              @change="handleFileUpload($event, car)"
              class="file-input"
              :id="getComputedID(car)"
              style="display: none"
          />
          <label :for="getComputedID(car)" class="upload-label">上传图片</label>
        </td>
        <!-- 在表格的每一行添加按钮 -->
        <td>
          <button class="assign-coach-btn" @click="setCarToAssignCoach(car)">分配教练</button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>


  <div class="modal fade" id="addCarModal" tabindex="-1" aria-labelledby="addCarModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">

        <div class="modal-header">
          <h5 class="modal-title" id="addCarModalLabel">增加车辆</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">
          <form>
            <div class="form-group">
              <label>车名</label>
              <input type="text" class="form-control" v-model="newCar.name" />
            </div>
            <div class="form-group">
              <label>类型</label>
              <select class="form-control" v-model="newCar.type">
                <option>大型轿车</option>
                <option>中型轿车</option>
                <option>小型轿车</option>
              </select>
            </div>
            <div class="form-group">
              <label>品牌</label>
              <input type="text" class="form-control" v-model="newCar.brand" />
            </div>
            <div class="form-group">
              <label>车辆全新程度</label>
              <input type="number" class="form-control" v-model="newCar.newlevel" />
            </div>
            <div class="form-group">
              <label>挡位</label>
              <select class="form-control" v-model="newCar.optype">
                <option value="1">自动档</option>
                <option value="0">手动挡</option>
              </select>
            </div>
          </form>
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" @click="addCar">保存</button>
        </div>

      </div>
    </div>
  </div>

  <!-- 添加分配教练模态框 -->
  <div class="modal fade" id="assignCoachModal" tabindex="-1" aria-labelledby="assignCoachModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="assignCoachModalLabel">分配教练</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group car-title">
              <label>{{carToAssignCoach.name}}</label>
            </div>
            <div class="form-group">
              <label>教练ID</label>
              <input type="text" class="form-control" v-model="selectedCoachId" />
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary" @click="assignCoach()">分配</button>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import './css/Car.css';
import Car from './js/Car';
export default Car;
</script>

<style>

</style>